<template>
  <div class="body">
    <div>
      <div class="TwoList_flex">
        <div class="TwoList_item" v-for="(item,index) in TwoListItem" :key="index" @click="goto('/list')">
          <div class="item_img">
            <img :src="item.icon" alt />
          </div>
          <div class="item_">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  computed: {
    TwoListItem: function () {
      return this.$store.state.TwoListItem;
    },
  },
  methods:{
    goto(path){
      this.$router.push(path)
    }
  }
};
</script>

<style scoped>
.body{
    width: 100%;
    height: 80vh;
    overflow: scroll;
}
.TwoList_flex {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-size: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.021);
  border-left: 1px solid rgba(0, 0, 0, 0.027);
}
.TwoList_item {
  width: 100px;
  height: 100px;
  margin-left: 5%;
  border: 1px solid rgba(0, 0, 0, 0.048);
  
}
.item_img {
  margin: 0 auto;
  width: 10vh;
  height: 66px;
}
.item_img img {
  width: 100%;
  
}
</style>